import React, { Component } from 'react';
import edit from './subCard.module.scss'
import { updatePayLimit, getCode } from '../../utils/interface'
import {times} from '../../utils/maths'
class EditSubCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            state: false,
            inpValu: "",
            msg: [1, 1, 1, 1, 1, 1]
        }
    }
    render() {
        return (
            <div className={edit.editSubCard}>
                <p className={edit.title}>每月消费上限</p>
                <div className={edit.inp}>
                    <i>￥</i>
                    <input ref="m_price" />
                </div>
                <p className={edit.btn} onClick={this.action.bind(this)}>确定</p>
                {this.state.state ? (
                    <div className={edit.showAction}  onClick={this.closeAction.bind(this)}>
                        <div className={edit.modu} onClick={(e)=>(this.setFocus(e))}>
                            <p className={edit.title}>修改额度</p>
                            <p className={edit.ts}>验证码已发送，请输入验证码，验证身份</p>
                            <input type="tel" maxLength="6" onChange={this.handleChange.bind(this)} ref={(input) => this.input = input} defaultValue={this.state.inpValu} />
                            <ul>
                                {this.state.msg.map((item, idx) => {
                                    return (
                                        <li key={idx} onClick={this.setFocus.bind(this)}>
                                            {this.state.inpValu[idx]}
                                        </li>
                                    )
                                })}
                            </ul>
                        </div>
                    </div>
                ) : ''}
            </div>
        );
    }
    closeAction(){
        this.setState({
            state:false
        })
    }
    action() {
        if (!this.refs.m_price.value) {
            alert('请输入每月消费上线')
            return false
        }
        this.setState({
            state: true
        }, () => {
            getCode({ phone: this.props.location.state.phone }).then(res => {
            })
            this.input.focus()
        })
    }
    setFocus(e) {
        this.input.focus()
        e.stopPropagation();
    }
    handleChange(e) {
        let that = this
        this.setState({
            inpValu: e.target.value
        })

        if (e.target.value.length === 6) {

            that.setState({
                state: false
            })
            console.log( that.refs.m_price.value)
            updatePayLimit({
                payLimit: times(that.refs.m_price.value,100),
                id:this.props.location.state.cardId,
                msgId: "", 
                ownPhone: this.props.location.state.phone, 
                code: this.input.value,
            }).then(res => {
                console.log(res.data)
                if (res.data.status === 200) {
                    this.props.history.push({pathname:'/editQuota',state:{price:that.refs.m_price.value}})
                } else {
                    alert(res.data.code)
                }
            })
        }
    }
    componentDidMount() {
        document.title = "修改"
    }
}

export default EditSubCard;